<template>
    <div class="preview-item model-goods-more-preview" :style="boxStyle"  >
        <div class="model-goods-more-row">
            <div class="model-goods-more-col">
                <template v-for="(item,index) in goods.list" :key="item.goods_id">
                    <template v-if="index % 2==0">
                        <preview-item
                            :item="item"
                            :config = "config"
                            :show="show"
                        ></preview-item>
                    </template>
                </template>
            </div>
            <div class="model-goods-more-col">
                <template v-for="(item,index) in goods.list" :key="item.goods_id">
                    <template v-if="index % 2!=0">
                        <preview-item
                            :item="item"
                            :config = "config"
                            :show="show"
                        ></preview-item>
                    </template>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
import previewMixin from '../../previewMixin.js';
import previewGoodsMixin from '../../previewGoodsMixin.js';
import defaultConfig from './defaultConfig.js';
import previewItem from './preview-item.vue';


export default{
    components:{
        previewItem
    },
    mixins:[previewMixin,previewGoodsMixin],
    data(){
        //let config = JSON.parse(JSON.stringify(defaultConfig));
        let config = defaultConfig;
        
        return {
            config,
            show:{
                title:false,
                price:false,
                btn:false 
            }
        }
    },
    methods:{
        setParam(param){
            console.log(JSON.stringify(param));
            this.$assign(this.config,param,true);
            console.log(JSON.stringify(this.config));
            if (!this.config.goods.number || this.config.goods.number == ''){
                this.config.goods.number =  10;
            }

            for(let name in this.show) this.show[name] = false;
            let show  = [];
            if (this.config.detail ){
                show  = this.config.detail.split(',');
            }

            show.map(item =>{
                this.show[item] = true;
            });

            this.setGoodsParam(this.config.goods);
        },
    },
    computed:{
        boxStyle(){
            let style = {};
            if (this.config.rowGap) style['--row-gap'] = this.config.rowGap;
            
            if (!this.goods.list){
                style['height'] = '300px';
            }else{
                if (this.goods.list.length==0){
                     style['height'] = '300px';
                }
            }

            if (this.config.pictureMode){
                switch(this.config.pictureMode){
                    case 'aspectFill':
                        style['--image-fit'] = 'cover';
                        break;
                    case 'aspectFit':
                        style['--image-fit'] = 'contain';
                        break;
                    case 'scaleToFill':
                        style['--image-fit'] = 'fill';
                        break;
                    case 'center':
                       style['--image-fit'] = 'none';
                    break;
                }
            }

            if (this.config.pictureHeight){
                style['--image-height'] = this.config.pictureHeight;
            }

            if (this.config.goodsBackgroundColor){
                style['--goods-backgroundColor'] = this.config.goodsBackgroundColor;
            }

            if (this.config.goodsRadius){
                style['--goods-radius'] = this.config.goodsRadius;
            }

            if (this.config.goodsPadding){
                style['--goods-padding'] = this.config.goodsPadding;
            }
            
            return style;
        }
    }
}
</script>

<style>
.model-goods-more-preview{
    width: 100%;
    position: relative;
    overflow: hidden;
    font-size: 30px;
    display: grid;
    --image-fit:cover;
    --image-height:100px;
    --goods-backgroundColor:#FFFFFF;
    --goods-radius:10px;
    --goods-padding:10px;
    --row-gap:10px;
}

.model-goods-more-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:var(--row-gap);
    width: 100%;
}

.model-goods-more-row .model-goods-more-col{
    display: flex;
    flex-direction: column;
    gap:var(--row-gap);
    width: 100%;
}
.model-goods-more-preview .model-goods-list-goods-item{
    background-color: var(--goods-backgroundColor);
    border-radius: var(--goods-radius);
    padding: var(--goods-padding);
}
.model-goods-more-preview .picture-main-box{
    width: 100%;
    position: relative;
}
.model-goods-more-preview .picture-main-box .picture-main-image{
    width: 100%;
    object-fit: var(--image-fit);
}

.model-goods-more-preview .picture-main-box.square{
    height: 0;
    padding-bottom: 100%;
}
.model-goods-more-preview .picture-main-box.square .picture-main-image{
    height: 100%;
    position: absolute;
}

.model-goods-more-preview .picture-main-box.custom .picture-main-image{
    height:var(--image-height);
}
@import '../../css/goods.css';

</style>